<template>
  <div class="pop-container-box">
    <div class="group-card-wrapper">
      <div class="card-title">人员过闸信息详情</div>
      <div class="close-btn" @click="close"></div>

      <div class="card-container">
        <div class="card-list-box">
          <div class="card-img-box">
            <div class="card-name">通行照片：</div>
            <div class="img-box">
              <img class="pre-img ava-img" :src="item.avatar" />

              <div class="zoom-btn" @click="preViewImage(item.avatar)"></div>
            </div>
          </div>
          <div class="card-img-box">
            <div class="card-name">证件照片：</div>
            <div class="img-box">
              <img class="pre-img card-img" :src="item.cardImg" />

              <div class="zoom-btn" @click="preViewImage(item.cardImg)"></div>
            </div>
          </div>
        </div>

        <div class="card-table-box">
          <div class="card-tr-box card-thead-box">
            <div class="card-str">姓名</div>
            <div class="card-str">证件类型</div>
            <div class="card-str">通行点位</div>
            <div class="card-str">通行时间</div>
          </div>
          <div class="card-tr-box">
            <div class="card-str" v-html="item.name"></div>
            <div class="card-str" v-html="item.type"></div>
            <div class="card-str" v-html="item.remark"></div>
            <div class="card-str" v-html="item.regTime"></div>
          </div>
        </div>
        <Teleport to="body">
          <el-image-viewer
            @close="
              () => {
                showViewer = false;
              }
            "
            v-if="showViewer"
            append-to-body="true"
            :url-list="urlList"
          />
        </Teleport>
      </div>
    </div>
  </div>
</template>
<script setup>
import useAppStore from "@/store/modules/app";
import { ElImageViewer } from "element-plus";
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
console.log(props.item, "item");

const close = inject("close");

const showViewer = ref(false);
const urlList = ref([]);

const preViewImage = (url) => {
  urlList.value = [url];
  showViewer.value = true;
};
</script>
<style lang="scss" scoped>
.pop-container-box {
  width: 450px;
  height: 314px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;

  .group-card-wrapper {
    pointer-events: all;
    width: 100%;
    height: 100%;
    position: relative;
    transform: scale(1.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
    padding: 60px 10px 10px;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(4px);
      z-index: -1;
    }

    .card-title {
      position: absolute;
      top: -4px;
      left: -4px;
      height: 46px;
      width: 100%;
      box-sizing: border-box;
      line-height: 42px;
      padding-left: 48px;
      font-size: 20px;
      color: #fff;
      font-family: PangMenZhengDao;
      background: url(@/assets/images/group_title_bg.png) no-repeat center
        left/auto 100%;
    }
    .close-btn {
      position: absolute;
      right: 4px;
      top: 4px;
      height: 30px;
      width: 30px;
      cursor: pointer;
      z-index: 3;
      background: url(@/assets/images/close.png) no-repeat center/cover;
    }

    .card-container {
      overflow: auto;
      display: flex;
      flex-direction: column;
      flex: 1;
      position: relative;

      .card-list-box {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        .card-img-box {
          display: flex;
          margin-right: 30px;
          font-size: 14px;

          .img-box {
            width: 112px;
            height: 150px;
            position: relative;
            .pre-img {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 100%;
              height: 100%;
              border-radius: 3px;
            }

            .zoom-btn {
              position: absolute;
              right: 0%;
              top: 0%;
              cursor: pointer;
              width: 20px;
              height: 20px;
              background: url(@/assets/images/zoom_icon.png) no-repeat
                center/cover;
            }
          }
        }
      }

      .card-table-box {
        display: flex;
        flex-direction: column;

        .card-tr-box {
          display: flex;
          height: 38px;
          &.card-thead-box {
            height: 22px;
            background-color: rgba($color: #fff, $alpha: 0.15);
          }

          .card-str {
            height: 100%;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-left: 10px;
            font-size: 14px;
            flex-shrink: 0;
            line-height: 15px;
            word-wrap: break-word; /* 长单词换行 */
            word-break: break-all; /* 强制换行（可选） */
            white-space: normal; /* 自动换行 */
            &:nth-child(1) {
              width: 60px;
            }
            &:nth-child(2) {
              width: 130px;
            }
            &:nth-child(3) {
              width: 100px;
            }
            &:nth-child(4) {
              width: 103px;
              flex: 1;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

.pop-header-box {
  background-color: #393a3a;
  position: relative;
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;

  .pop-close-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    cursor: pointer;

    .close-btn {
      width: 12px;
      height: 12px;
    }
  }
}

.pop-inner-box {
  padding-top: 1px;
  // padding-bottom: 1px;
  position: relative;
  width: 400px;
  max-height: 295px;
  height: auto;
  background-color: rgba($color: #000000, $alpha: 0.2);
  backdrop-filter: blur(4px);
  overflow-x: hidden;
  overflow-y: auto;

  .song-list-box {
    transition: heaight 0.3s;

    .song-title-name {
      width: 100%;
      height: 24px;
      background-color: #2a2a2a;
      box-sizing: border-box;
      padding-left: 10px;
      display: flex;
      align-items: center;
      font-size: 12px;
      margin-bottom: 1px;
    }

    .artist-group-box {
      .artist-item-box {
        width: 100%;
        height: 48px;
        background-color: #161514;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 10px;
        margin-bottom: 1px;

        .left-box {
          height: 100%;
          display: flex;
          align-items: center;

          .artist-img-box {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-color: #afafaf;
            margin-right: 10px;

            img {
              border-radius: 50%;
              width: 100%;
              height: 100%;
            }
          }

          .artist-detail-box {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 12px;
            line-height: 12px;
            box-sizing: border-box;
            color: #fff;

            .artist-num-box {
              opacity: 0.5;
              font-size: 10px;
            }
          }
        }

        .right-box {
          position: relative;
          width: 30px;
          height: 30px;
        }
      }
    }
  }
}
</style>
